<template>
  <div class="page">
    <a-tree
      v-if="treeData.length"
      :show-line="true"
      :show-icon="false"
      :tree-data="treeData"
      :default-expand-all="true"
      v-model:selectedKeys="selectedKeys"
      @select="onSelect"
    >
    </a-tree>
  </div>
</template>
<script lang="ts">
import { SelectEvent, TreeDataItem } from "ant-design-vue/es/tree/Tree";
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  components: {},
  setup() {
    const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const treeData = ref<TreeDataItem[]>([
      {
        title: "水果",
        key: "0-0",
        children: [
          {
            title: "梨",
            key: "0-0-0",
            children: [
              { title: "冬梨", key: "0-0-0-0" },
              { title: "夏梨", key: "0-0-0-1" }
            ]
          },
          {
            title: "苹果",
            key: "0-0-1",
            children: [
              {
                key: "0-0-1-0",
                title: "富士苹果"
              },
              {
                key: "0-0-1-1",
                title: "秦观苹果"
              }
            ]
          }
        ]
      },
      {
        title: "蔬菜",
        key: "0-1",
        children: [
          {
            title: "白菜",
            key: "0-1-0"
          },
          {
            title: "青菜",
            key: "0-1-1",
            children: []
          }
        ]
      }
    ]);
    watch(expandedKeys, () => {
      console.log("expandedKeys", expandedKeys);
    });
    watch(selectedKeys, () => {
      console.log("selectedKeys", selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log("checkedKeys", checkedKeys);
    });
    const onSelect = (selectedKeys: string[], info: SelectEvent) => {
      console.log("selected", selectedKeys, info);
    };
    return {
      expandedKeys,
      selectedKeys,
      checkedKeys,
      treeData,
      onSelect
    };
  }
});
</script>

<style lang="less" scoped></style>
